<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-button size="small" class="filter-item" type="primary" @click="closeSelf"  style="float:right;">关 闭</el-button>
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-circle-plus-outline" @click="handleCreate" style="float:right; margin-right: 20px">新建</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div>
          <div class="treeArea" style=" margin-top: 20px">
            <el-table
              :data="userData"
              size="small"
              style="width: 100%;border:#eeeeee">
              <el-table-column
                prop="user_loginName"
                label="登录名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="user_name"
                label="用户名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="user_nameEn"
                label="用户名称英文">
              </el-table-column>
              <el-table-column
                prop="orgId"
                label="用户机构ID">
              </el-table-column>
              <el-table-column
                prop="user_code"
                label="用户编码">
              </el-table-column>
              <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="listQuery.page" :page-sizes="[10,20,30, 50]"
                           :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </div>
          <el-row :gutter="5">
            <el-col style="text-align: center; border-top:1px solid #e6e6e6; padding-top:20px; margin-top:10px;">
              <!--<el-button class="filter-item" type="primary" @click="saveData">保 存</el-button>-->
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
    <el-dialog
      title="未设置人员"
      :visible.sync="dialogVisible"
      top="5vh"
      width="80%">
      <el-row>
        <el-col :span="8">
          <el-tree ref='tree'
                   :data="treeData"
                   v-loading="loading"
                   style="height: 400px; overflow: scroll"
                   :props="defaultProps"
                   :expand-on-click-node='false'
                   @node-click="handleNodeClick"
                   node-key="id"
                   :highlight-current='true'
                   :default-expand-all='true'></el-tree>
        </el-col>
        <el-col :span="16">
          <el-table
            :data="userDataDemo"
            size="small"
            style="width: 100%;height: 330px; overflow: auto;border:#eeeeee">
            <el-table-column
              prop="user_loginName"
              label="登录名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="user_name"
              label="用户名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="user_nameEn"
              label="用户名称英文">
            </el-table-column>
            <el-table-column
              prop="orgId"
              label="用户机构ID">
            </el-table-column>
            <el-table-column
              prop="user_code"
              label="用户编码">
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChangeDemo"
                           @current-change="handleCurrentChangeDemo"
                           :page-sizes="[10,20,30, 50]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalDemo">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  batchInsertItemUser,
  selectNoExistUser,
  selectExistUser,
  SysOrgInfo,
  treeById,
  deleteHandle
} from '@/api/systemManage/roleManagementRoleEdit'
export default {
  name: 'editRoleUser',
  components: {},
  data() {
    return {
      total: 0,
      treeData: [],
      loading: false,
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      oldMenuIdArr: [],
      listQuery: {
        rowBounds: {
          offset: 1,
          limit: 10
        },
        condition: {
        },
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'userId'
        }]
      },
      listQueryDemo: {
        rowBounds: {
          offset: 1,
          limit: 10
        },
        condition: {
        },
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'userId'
        }]
      },
      totalDemo: 0,
      form: '',
      userData: [],
      userDataDemo: []
    }
  },
  created() {
    this.editTree()
  },
  methods: {
    handleDelete(row) {
      var rowDemo = [
        {
          userId: row.user_id,
          roleId: this.$route.params.id,
          orgId: row.user_orgId
        }
      ]
      deleteHandle(rowDemo).then(response => {
        this.treeData = response.data.data
        this.userData.splice(this.userData.indexOf(row), 1)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuerypage = 1
      this.listQuery.rowBounds.limit = val
      this.editTree()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.listQuerypage = val
      this.listQuery.rowBounds.offset =
        this.listQuery.rowBounds.limit * (val - 1) + 1
      this.editTree()
    },
    // 翻页器使用
    handleSizeChangeDemo(val) {
      this.listQueryDemo.rowBounds.limit = val
      selectNoExistUser(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    // 翻页器使用
    handleCurrentChangeDemo(val) {
      this.listQueryDemo.rowBounds.offset =
        this.listQueryDemo.rowBounds.limit * (val - 1) + 1
      selectNoExistUser(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    handleClick(row) {
      var rowDemo = [
        {
          userId: row.user_id,
          roleId: this.$route.params.id,
          orgId: row.user_orgId
        }
      ]
      SysOrgInfo(rowDemo).then(response => {
        this.userDataDemo.splice(this.userDataDemo.indexOf(row), 1)
        this.userData.push(row)
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      })
    },
    handleCreate() {
      this.dialogVisible = true
      treeById({ id: this.$store.getters.orgId }).then(response => {
        this.treeData = response.data.data
      })
    },
    handleNodeClick(data) {
      this.listQueryDemo.orgId = data.id
      this.listQueryDemo.roleId = this.$route.params.id
      selectNoExistUser(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    editTree() {
      this.loading = true
      this.listQuery.roleId = this.$route.params.id
      selectExistUser(this.listQuery).then(response => {
        this.userData = response.data.data.records
        this.total = response.data.data.count
        this.loading = false
      })
    },
    saveData() {
      const insertArr = []
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      for (const temp of checkedKeys) {
        const input = {}
        input.userId = this.$route.params.rowId
        input.roleId = temp
        input.orgId = this.$route.params.id
        insertArr.push(input)
      }
      batchInsertItemUser(insertArr).then(response => {
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.$router.push({ name: 'roleManagement' })
      })
    },
    closeSelf() {
      this.$router.push({ name: 'roleManagement' })
    }
  }
}
</script>

<style scoped>
.treeArea {
    max-height: 66vh;
    overflow-y: auto;
}
</style>
